<template>
  <view class="content need_scroll_top_view">
    <view class="bg"></view>
    <scroll-view :scroll-y="true" class="scroll">
      <view class="cont">
        <view class="title">商户营业执照</view>
        <view class="upload" v-if="!info.licenseImg" :style="{backgroundImage: 'url(' + bgImage +')'}" @click="update('license')">
          <image :src="$store.state.imgBaseUrl + '/freeStore/icon.png'"></image>
          <view>上传营业执照照片</view>
        </view>
        <view class="update" v-else>
          <view class="delect" @click.stop="clearImgLicense">x</view>
          <image :src="info.licenseImg" class="border-radius"></image>
        </view>
        <block v-if="isLicense">
          <view class="box">
            <view class="name">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</view>
            <view class="inpt">
              <input type="text" v-model="info.storeName" @blur="backFixationTop()">
            </view>
          </view>
          <view class="box">
            <view class="name">法定代表人</view>
            <view class="inpt">
              <input type="text" v-model="info.legalPerson" @blur="backFixationTop()">
            </view>
          </view>
          <view class="box">
            <view class="name">注册地址</view>
            <view class="inpt">
              <input type="text" v-model="info.businessAddress" @blur="backFixationTop()">
            </view>
          </view>
          <view class="box">
            <view class="name">社会信用代码</view>
            <view class="inpt">
              <input type="text" v-model="info.licenseNumber" @blur="backFixationTop()">
            </view>
          </view>
        </block>
      </view>
      <view class="cont" style="padding-bottom: 46rpx;">
        <view class="title">法定代表人身份证:（用于平台核验操作）</view>
        <view class="hint">依照行业规定，平台需要校验营业执照法人身份证件信息</view>
        <view class="upload" v-if="!info.frontImg" :style="{backgroundImage: 'url(' + bgImageZm +')'}" @click="update('0')">
          <image :src="$store.state.imgBaseUrl + '/freeStore/icon.png'"></image>
          <view>上传身份证正面</view>
        </view>
        <view class="update" v-else>
          <view class="delect" @click.stop="clearImgId('0')">x</view>
          <image :src="info.frontImg" class="border-radius"></image>
        </view>
        <view class="upload mt49" v-if="!info.versoImg" :style="{backgroundImage: 'url(' + bgImageFm +')'}" @click="update('1')">
          <image :src="$store.state.imgBaseUrl + '/freeStore/icon.png'"></image>
          <view>上传身份证反面</view>
        </view>
        <view class="update" v-else>
          <view class="delect" @click.stop="clearImgId('1')">x</view>
          <image :src="info.versoImg" class="border-radius"></image>
        </view>
        <block v-if="info.frontImg || info.versoImg">
          <view class="box">
            <view class="name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
            <view class="inpt">
              <input type="text" v-model="info.realname" @blur="backFixationTop()">
            </view>
          </view>
          <view class="box">
            <view class="name">身份证</view>
            <view class="inpt">
              <input type="text" v-model="info.idCardNumber" @blur="backFixationTop()">
            </view>
          </view>
          <!-- <view class="box">
            <view class="name">证件地址</view>
            <view class="inpt">
              <input type="text" v-model="info.idAddress" @blur="backFixationTop()">
            </view>
          </view> -->
          <!-- <view class="box">
            <view class="name">有效期至</view>
            <view class="inpt">
              <input type="text" v-model="info.date" @blur="backFixationTop()">
            </view>
          </view> -->
        </block>
      </view>
    </scroll-view>
    <view class="footer">
      <view class="btn no" @click="modal.show = true">暂不认证</view>
      <view class="btn sure" @click="submit">下一步</view>
    </view>
    
    <!-- <uni-popup class="new-pop-style" ref="changePhonePop" type="center" :maskClick="modal.maskClick" :show="modal.show"> -->
    <view class="new-pop-style" v-if="modal.show">
      <view class="new-pop-box">
        <view class="pop-tit">温馨提示</view>
        <view class="pop-conter">
          <view>未进行企业认证无法享受商户权益！取消认证后，请按照以下方式进行再认证：</view>
          <view>1、再次登录社区电商商户端，首页的认证弹框入口；</view>
          <view>2、社区电商商户端，底部【工作台】-【免费商户认证】入口进行商户认证。</view>
        </view>
        <view class="pop-foot">
          <view class="btn" @click="gotoShop">决意离开</view>
          <view class="btn cur" @click="modal.show = false">继续认证</view>
        </view>
      </view>
    </view>
    <!-- </uni-popup> -->
    <view class="new-loading" v-if="newLoading">
      <view class="new-loading-box">
        <i class="uni-icon_toast uni-loading icon"></i>
        <view>识别中</view>
      </view>
    </view>
  </view>
</template>
<script>
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
import { uploadFile } from "@/unit/common.js"
import { discernCharter } from "@/service/certificationReplenish/certificationReplenish.service.js"
import { discernCard } from "@/service/join/join.service.js"
import { freeStoreJoin } from '@/service/freeStore/freeStore.servies.js'
import formValid from '@/unit/graceChecker.js'
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue'
export default {
  mixins: [scrollToTargetPosition],
  components: {uniPopup},
  data () {
    return {
      bgImage: this.$store.state.imgBaseUrl + '/freeStore/yyzz.png',
      bgImageZm: this.$store.state.imgBaseUrl + '/freeStore/zm.png',
      bgImageFm: this.$store.state.imgBaseUrl + '/freeStore/fm.png',
      info: {
        storeName: '',
        licenseFileId: '',
        licenseImg: '',
        businessAddress: '',
        licenseNumber: '',
        legalPerson: '',
        realname: '',
        idCardNumber: '',
        idCardImage1: '',
        idCardImage2: '',
        idAddress: '',
        date: '',
        frontImg: '',
        versoImg: ''
      },
      inviteId: '',
      isLicense: false,
      isFrontUpdate: false,
      isBack: false,
      freeStoreInfo: null,
      newLoading: false,
      horizontal: 'right',
      direction: 'horizontal',
      pattern: {
        color: '#FFFFFF',
        backgroundColor: 'rgba(0,0,0,0.5)',
        selectedColor: '#007AFF',
        buttonColor:"#434343"
      },
      content: [
        {
          iconPath: '../../static/image/icon/loginout.png', // 图片路径
          text: '安全退出',
          active: false
        }
      ],
      modal: {
        show: false,
        maskClick: false
      }
    }
  },
  onLoad(option) {
    this.inviteId = option.inviteId;
  },
  onShow() {
    let item = uni.getStorageSync('freeStoreInfo');
    if (item) {
      this.isLicense = true;
      this.isFrontUpdate = true,
      this.isBack = true,
      this.freeStoreInfo = item;
      this.info.storeName = item.storeName;
      this.info.licenseFileId = item.businessLicenseFileId[0].id;
      this.info.licenseImg = item.businessLicenseFileId[0].url;
      this.info.businessAddress = item.businessAddress;
      this.info.licenseNumber = item.licenseNumber;
      this.info.legalPerson = item.realname;
      this.info.realname = item.realname;
      this.info.idCardNumber = item.idCardNumber;
      this.info.idCardImage1 = item.idCardImage1.id;
      this.info.frontImg = item.idCardImage1.url;
      this.info.idCardImage2 = item.idCardImage2.id;
      this.info.versoImg = item.idCardImage2.url;
      this.info.idAddress = item.district;
      this.info.date = item.validTime || '-';
    }
  },
  methods: {
    gotoShop () {
      this.modal.show = false;
      uni.switchTab({
        url: '/pages/workbench/index'
      })
    },
    update (type) {
      uploadFile({success: (obj) => {
        if (obj.status == 0) {
          if (type == 'license') {
            this.getDiscernCharter(obj.data.url, obj.data.id)
          } else {
            this.getDiscernCard(type, obj.data.url, obj.data.id)
          }
        } else {
          uni.showToast({
            title: obj.msg,
            icon: 'none'
          });
        }
      }})
    },
    getDiscernCharter (url, id) {
      this.newLoading = true;
      let params = {
        id: id,
        appliedType: 2,
        isFace: 0,
        url: url
      }
      discernCharter(params, (res) => {
        if (res.status == 0) {
          this.info.storeName = res.data.name;
          this.info.legalPerson = res.data.person;
          this.info.businessAddress = res.data.address;
          this.info.licenseNumber = res.data.regNum;
          this.isLicense = true;
          this.info.licenseImg = url;
          this.info.licenseFileId = id;
          this.newLoading = false;
        } else {
          this.newLoading = false;
          this.clearImgLicense();
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    getDiscernCard (type, url, id) {
      this.newLoading = true;
      let params = {
        id: id,
        appliedType: 2,
        isFace: type,
        url: url
      }
      discernCard(params, (res) => {
        if (res.status == 0) {
          this.isId = 1;
          if (type == '0') {
            this.isFrontUpdate = true;
            this.info.realname = res.data.name;
            this.info.idCardNumber = res.data.num;
            this.info.idCardImage1 = id;
            this.info.frontImg = url;
            this.info.idAddress = res.data.address;
            this.newLoading = false;
          } else {
            this.isBack = true;
            this.info.versoImg = url;
            this.info.idCardImage2 = id;
            this.info.date = res.data.startDate + '-' + res.data.endDate;
            this.newLoading = false;
          }
        } else {
          this.newLoading = false;
          this.clearImgId(type);
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    clearImgLicense () {
      this.isLicense = false;
      this.info.licenseImg = '';
      this.info.licenseFileId = '';
      this.info.storeName = '';
      this.info.legalPerson = '';
      this.info.businessAddress = '';
      this.info.licenseNumber = '';
    },
    clearImgId (type) {
      if (type == '0') {
        this.isFrontUpdate = false;
        this.info.idCardImage1 = '';
        this.info.frontImg = '';
        this.info.realname = '';
        this.info.idCardNumber = '';
        this.info.idAddress = ''
      } else {
        this.isBack = false;
        this.info.versoImg = '';
        this.info.idCardImage2 = '';
        this.info.date = '';
      }
    },
    submit () {
      if (!this.isLicense) {
        uni.showToast({
          title: '请上传营业执照',
          icon: 'none'
        });
        return false;
      } else if (!this.info.frontImg || !this.info.versoImg) {
        uni.showToast({
          title: '请上传身份证',
          icon: 'none',
          
        });
        return false;
      }
    
      let rule = [
        {name:'storeName', checkType: 'notnull', checkRule:'', errorMsg:'请完善营业执照名称'},
        {name:'legalPerson', checkType: 'notnull', checkRule:'', errorMsg:'请完善法定代表人'},
        {name:'businessAddress', checkType: 'notnull', checkRule:'', errorMsg:'请完善注册地址'},
        {name:'licenseNumber', checkType: 'notnull', checkRule:'', errorMsg:'请完善社会信用代码'},
        {name:'realname', checkType: 'notnull', checkRule:'', errorMsg:'请完善身份姓名'},
        {name:'idCardNumber', checkType: 'notnull', checkRule:'', errorMsg:'请完善身份证号码'},
        // {name:'idAddress', checkType: 'notnull', checkRule:'', errorMsg:'请完善证件地址'},
        // {name:'date', checkType: 'notnull', checkRule:'', errorMsg:'请完善身份证有效期'},
      ];
      var checkRes = formValid.check(this.info, rule);
      if (!checkRes) {
        uni.showToast({ title: formValid.error, icon: "none" });
        return false;
      }
      
      let params = {
        storeName: this.info.storeName,
        legalPerson: this.info.legalPerson,
        businessAddress: this.info.businessAddress,
        businessLicenseFileId: this.info.licenseFileId,
        licenseNumber: this.info.licenseNumber,
        realname: this.info.realname,
        idCardNumber: this.info.idCardNumber,
        idCardImage1: this.info.idCardImage1,
        idCardImage2: this.info.idCardImage2,
        inviteId: this.inviteId,
        appliedType: 4, // 免费商户
        rank: 2 
      }
      console.log(params)
      freeStoreJoin(params, (res) => {
        if (res.status == 0) {
          if (this.freeStoreInfo) {
            uni.removeStorageSync('freeStoreInfo')
          }
          uni.showToast({
            title: '信息已提交！',
            icon: 'none',
            duration: 2000,
            mask: true,
            success: () => {
              uni.redirectTo({
                url: '/pages/freeStore/result'
              });
            }
          });
          
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.new-loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;left: 0;right: 0;bottom: 0;
  .new-loading-box {
    position: fixed;
    z-index: 999;
    width: 8em;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: rgba(17,17,17,.7);
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
    padding-bottom: 30rpx;
    .icon {
      margin: 40rpx auto 0;
      width: 76rpx;
      height: 76rpx;
      vertical-align: baseline;
      display: block;
      vertical-align: middle;
      -webkit-animation: uni-loading 1s steps(12) infinite;
      animation: uni-loading 1s steps(12) infinite;
      background-size: 100%;
    }
  }
}
.content {
  height: 100vh;
  background-color: #FFFFFF;
  font-family: PingFang SC;
  .bg {
    width: 100%;
    height: 20rpx;
    background-color: #FAFAFA;
  }
  .scroll {
    height: calc(100vh - 128rpx);
    .cont {
      padding-left: 30rpx;
      .title {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51,51,51,1);
        line-height: 36rpx;
        margin-top: 31rpx;
      }
      .hint {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(153,153,153,1);
        line-height: 36rpx;
        margin-top: 20rpx;
      }
      .upload {
        width: 600rpx;
        height: 301rpx;
        margin: 39rpx auto 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 77rpx;
        image {
          display: block;
          width: 113rpx;
          height: 113rpx;
          margin: 0 auto;
        }
        view {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(184,124,7,1);
          text-align: center;
          margin-top: 57rpx;
        }
      }
      .update {
        width: 600rpx;
        height: 376rpx;
        margin: 39rpx auto 0;
        position: relative;
        image {
          width: 100%;
          height: 100%;
        }
        .delect {
          width: 32rpx;
          height: 32rpx;
          line-height: 26rpx;
          color: #FFFFFF;
          font-size: 22rpx;
          text-align: center;
          background: rgba(51,51,51,1);
          opacity: 0.6;
          border-radius: 50%;
          z-index: 10;
          position: absolute;
          right: -14rpx;
          top: -14rpx;
        }
      }
      .mt49 {
        margin-top: 49rpx;
      }
      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 32rpx 0 30rpx;
        font-size: 28rpx;
        border-bottom: 1rpx solid #E1E1E1;
        .name {
          width: 145rpx;
          font-size: 28rpx;
          color: #999999;
        }
        .inpt {
          width: 73%;
          margin-left: 30rpx;
          display: flex;
          justify-content: space-between;
          .uni-list-cell {
            width: 100%;
            font-size: 28rpx;
          }
          input{
            width: 100%;
            font-size: 28rpx;
            color: #333333;
            font-weight:bold;
          }
        }
      }
    }
  }
  .footer {
    padding: 14rpx 30rpx 20rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    bottom: 0;
    .btn {
      font-size: 36rpx;
      // font-weight: bold;
      text-align: center;
      border-radius: 4rpx;
      &.no {
        width: 224rpx;
        height: 86rpx;
        line-height: 86rpx;
        background-color: #FFFFFF;
        border: 1px solid #999999;
        color: #999999;
        margin-right: 16rpx;
      }
      &.sure {
        width: 450rpx;
        height: 88rpx;
        line-height: 88rpx;
        color: #F6DA99;
        background-color: #434343;
      }
    }
  }
}
</style>
